<template>
  <div>
    <el-form :model="rewardForm" ref="rewardForm" label-width="10em">
      <h-box header="优惠券及优惠内容（全部必填，保存后不可修改，请谨慎核对后保存）">
        <el-form-item label="优惠券类型" prop="cardType" :rules="rewardFormRoles.cardType">
          <el-radio-group v-model="rewardForm.cardType">
            <el-radio label="CASH">代金券</el-radio>
            <el-radio label="DISCOUNT">折扣券</el-radio>
            <el-radio label="GIFT">兑换券</el-radio>
            <el-radio label="GROUPON">团购券</el-radio>
            <el-radio label="GENERAL_COUPON">通用券</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 代金券填写，start -->
        <el-form-item label="代金券优惠" prop="_reduceCost" :rules="rewardFormRoles._reduceCost" v-if="rewardForm.cardType === 'CASH'">
          <el-input v-model.number="rewardForm._reduceCost" placeholder="请输入" style="width: 240px;">
            <template slot="prepend">立减</template>
            <template slot="append">元</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">代金券优惠最少 1 元，限填写整数金额</div>
        </el-form-item>
        <el-form-item label="起用金额" prop="_leastCost" :rules="rewardFormRoles._leastCost" v-if="rewardForm.cardType === 'CASH'">
          <el-input v-model.number="rewardForm._leastCost" placeholder="请输入" style="width: 240px;">
            <template slot="prepend">满</template>
            <template slot="append">元可用</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">启用金额填写 0 元即无门槛，限填写整数金额</div>
        </el-form-item>
        <!-- 代金券填写，end -->
        <!-- 折扣券填写，start -->
        <el-form-item label="折扣券优惠" prop="_discount" :rules="rewardFormRoles._discount" v-else-if="rewardForm.cardType === 'DISCOUNT'">
          <el-input v-model.number="rewardForm._discount" placeholder="10 - 99" style="width: 240px;">
            <template slot="prepend">打</template>
            <template slot="append">折</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填60，就是打6折；填80，就是打8折。最小10，最大99</div>
        </el-form-item>
        <!-- 折扣券填写，end -->
        <!-- 礼品券填写，start -->
        <el-form-item label="兑换内容" prop="defaultDetail" :rules="rewardFormRoles.defaultDetail" v-else-if="rewardForm.cardType === 'GIFT'">
          <el-input v-model="rewardForm.defaultDetail" placeholder="请输入兑换内容，最多 1000 个字" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填写送的东西，例如某种咖啡 1 杯、某饮料 1 瓶、某某菜 1 份、某某套餐 1 份，最多 1000 个字</div>
        </el-form-item>
        <!-- 礼品券填写，end -->
        <!-- 团购券填写，start -->
        <el-form-item label="团购券内容" prop="dealDetail" :rules="rewardFormRoles.dealDetail" v-else-if="rewardForm.cardType === 'GROUPON'">
          <el-input v-model="rewardForm.dealDetail" placeholder="请输入团购券内容，最多 1000 个字" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填写团购套餐包含的内容，最多 1000 个字</div>
        </el-form-item>
        <!-- 团购券填写，end -->
        <!-- 通用券填写，start -->
        <el-form-item label="通用券内容" prop="defaultDetail" :rules="rewardFormRoles.defaultDetail" v-else-if="rewardForm.cardType === 'GENERAL_COUPON'">
          <el-input v-model="rewardForm.defaultDetail" placeholder="请输入优惠内容，最多 1000 个字" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填写本张优惠券可享受的优惠内容，最多 1000 个字</div>
        </el-form-item>
        <!-- 通用券填写，end -->
      </h-box>
      <h-box header="重要基础信息（保存后不可修改，请谨慎核对后保存）">
        <el-form-item label="商户logo" prop="baseInfo.logoUrl" :rules="rewardFormRoles.baseInfo.logoUrl">
          <h-image v-if="rewardForm.baseInfo.logoUrl !== ''" :src="rewardForm.baseInfo.logoUrl" size="60px" border-radius="50%" border flex mode="background-image"></h-image>
          <el-button @click="handleDialogImage" type="primary" size="mini" icon="el-icon-picture" plain>选择logo图片</el-button>
        </el-form-item>
        <el-form-item label="商户名称" prop="baseInfo.brandName" :rules="rewardFormRoles.baseInfo.brandName">
          <el-input v-model="rewardForm.baseInfo.brandName" :disabled="type === 'edit'" :max-length="12" placeholder="最多 12 个字" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="优惠券标题" prop="baseInfo.title" :rules="rewardFormRoles.baseInfo.title">
          <el-input v-model="rewardForm.baseInfo.title" :disabled="type === 'edit'" :max-length="9" placeholder="最多 9 个字" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">建议涵盖卡券属性、服务及金额，尽量简单直接</div>
        </el-form-item>
        <el-form-item label="库存" prop="baseInfo.sku.quantity" :rules="rewardFormRoles.baseInfo.sku.quantity">
          <el-input v-model.number="rewardForm.baseInfo.sku.quantity" :disabled="type === 'edit'" placeholder="1 - 99999999" style="width: 240px;">
            <template slot="prepend">共</template>
            <template slot="append">张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="有效期类型" prop="baseInfo.dateInfo.type" :rules="rewardFormRoles.baseInfo.dateInfo.type">
          <el-radio-group v-model="rewardForm.baseInfo.dateInfo.type" :disabled="type === 'edit'">
            <el-radio label="DATE_TYPE_FIX_TIME_RANGE">固定日期</el-radio>
            <el-radio label="DATE_TYPE_FIX_TERM">固定时长(自领取后按天算)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期" prop="baseInfo.dateInfo._timeRange" :rules="rewardFormRoles.baseInfo.dateInfo._timeRange" v-if="rewardForm.baseInfo.dateInfo.type === 'DATE_TYPE_FIX_TIME_RANGE'">
          <h-date-range :value.sync="rewardForm.baseInfo.dateInfo._timeRange" :start-time.sync="rewardForm.baseInfo.dateInfo.beginTimeStamp" :end-time.sync="rewardForm.baseInfo.dateInfo.endTimeStamp" :disabled="type === 'edit'" style="width: 400px;"></h-date-range>
        </el-form-item>
        <el-form-item label="有效期" required v-else-if="rewardForm.baseInfo.dateInfo.type === 'DATE_TYPE_FIX_TERM'">
          <el-form-item prop="baseInfo.dateInfo.fixedTerm" :rules="rewardFormRoles.baseInfo.dateInfo.fixedTerm" style="display: inline-block;">
            <el-input v-model.number="rewardForm.baseInfo.dateInfo.fixedTerm" :disabled="type === 'edit'" style="width: 210px;">
              <template slot="prepend">有效期</template>
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <span class="hui-mx-8px">，</span>
          <el-form-item prop="baseInfo.dateInfo.fixedBeginTerm" :rules="rewardFormRoles.baseInfo.dateInfo.fixedBeginTerm" style="display: inline-block;">
            <el-input v-model.number="rewardForm.baseInfo.dateInfo.fixedBeginTerm" :disabled="type === 'edit'" style="width: 240px;">
              <template slot="prepend">领取后</template>
              <template slot="append">天生效</template>
            </el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="统一过期时间" prop="baseInfo.dateInfo._endTimeStamp" :rules="rewardFormRoles.baseInfo.dateInfo._endTimeStamp" v-if="rewardForm.baseInfo.dateInfo.type === 'DATE_TYPE_FIX_TERM'">
          <el-date-picker @change="onChangeEndTimeStamp" v-model="rewardForm.baseInfo.dateInfo._endTimeStamp" :disabled="type === 'edit'" :picker-options="pickerOptions" type="date" placeholder="请选择统一过期时间" value-format="timestamp" align="center"></el-date-picker>
          <div class="hui-color-text-secondary hui-font-size-small">固定时长优惠券，超过此日期后，优惠券统一过期</div>
        </el-form-item>
      </h-box>
      <h-box header="其他基础信息（保存后可修改）">
        <el-form-item label="优惠券码型" prop="baseInfo.codeType" :rules="rewardFormRoles.baseInfo.codeType">
          <el-radio-group v-model="rewardForm.baseInfo.codeType">
            <el-radio label="CODE_TYPE_QRCODE">二维码 + 券号文字</el-radio>
            <el-radio label="CODE_TYPE_BARCODE">一维码(条码) + 券号文字</el-radio>
          </el-radio-group>
          <div class="hui-color-text-secondary hui-font-size-small">如无特殊情况，请选择二维码</div>
        </el-form-item>
        <el-form-item label="卡券颜色" prop="baseInfo.color" :rules="rewardFormRoles.baseInfo.color">
          <h-radio-color :value.sync="rewardForm.baseInfo.color"></h-radio-color>
        </el-form-item>
        <el-form-item label="使用提示" prop="baseInfo.notice" :rules="rewardFormRoles.baseInfo.notice">
          <el-input v-model="rewardForm.baseInfo.notice" :max-length="16" placeholder="最多 16 个字" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">提示用户使用的方法，例如：使用时请向店员出示</div>
        </el-form-item>
        <el-form-item label="使用说明" prop="baseInfo.description" :rules="rewardFormRoles.baseInfo.description">
          <el-input v-model="rewardForm.baseInfo.description" placeholder="请输入优惠券使用说明，最多 1000 个字" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">如「不可与其他优惠同享、请在有效期内使用」等等的格式条款，消费者不会去仔细看，主要是免责用</div>
        </el-form-item>
        <el-form-item label="客服电话" prop="baseInfo.servicePhone" :rules="rewardFormRoles.baseInfo.servicePhone">
          <el-input v-model="rewardForm.baseInfo.servicePhone" placeholder="区号-电话号 / 400" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">建议填写“区号-电话号”或400格式</div>
        </el-form-item>
        <el-form-item label="门店限制" prop="baseInfo.useAllLocations" :rules="rewardFormRoles.baseInfo.useAllLocations">
          <el-radio-group v-model="rewardForm.baseInfo.useAllLocations" @change="onChangeUseAllLocations">
            <el-radio :label="true">所有门店可用</el-radio>
            <el-radio :label="false">部分门店可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用门店" prop="baseInfo.locationIdList" :rules="rewardFormRoles.baseInfo.locationIdList" v-if="!rewardForm.baseInfo.useAllLocations">
          <el-table :data="rewardForm.baseInfo.locationIdList" border stripe size="medium" style="width: 400px; line-height: 23px;" class="hui-mb-1">
            <el-table-column label="门店ID" prop="id"></el-table-column>
            <el-table-column label="门店名称" prop="label"></el-table-column>
          </el-table>
          <el-button @click="handleDialogBranch" type="primary" size="small" icon="el-icon-location" plain>设置活动门店</el-button>
        </el-form-item>
        <el-form-item label="每人限领" prop="baseInfo.getLimit" :rules="rewardFormRoles.baseInfo.getLimit">
          <el-input v-model.number="rewardForm.baseInfo.getLimit" placeholder="默认 50" style="width: 140px;">
            <template slot="append">张</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">每人可领券的数量限制，超出后无法领取</div>
        </el-form-item>
        <el-form-item label="每人限用" prop="baseInfo.useLimit" :rules="rewardFormRoles.baseInfo.useLimit">
          <el-input v-model.number="rewardForm.baseInfo.useLimit" placeholder="默认 50" style="width: 140px;">
            <template slot="append">张</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">每人可核销的数量限制，超出后无法核销</div>
        </el-form-item>
        <el-form-item label="是否可分享" prop="baseInfo.canShare" :rules="rewardFormRoles.baseInfo.canShare">
          <el-radio-group v-model="rewardForm.baseInfo.canShare">
            <el-radio :label="false">不可以分享</el-radio>
            <el-radio :label="true">可以分享</el-radio>
          </el-radio-group>
          <div class="hui-color-text-secondary hui-font-size-small">微信原生卡券领取页面是否可分享</div>
        </el-form-item>
        <el-form-item label="是否可转赠" prop="baseInfo.canGiveFriend" :rules="rewardFormRoles.baseInfo.canGiveFriend">
          <el-radio-group v-model="rewardForm.baseInfo.canGiveFriend">
            <el-radio :label="false">不可以转赠</el-radio>
            <el-radio :label="true">可以转赠</el-radio>
          </el-radio-group>
          <div class="hui-color-text-secondary hui-font-size-small">微信原生卡券是否可转赠</div>
        </el-form-item>
      </h-box>
      <h-box header="优惠券高级信息（保存后不可修改，请谨慎核对后保存）">
        <template v-if="rewardForm.cardType === 'CASH'">
          <el-form-item label="可用商品描述" prop="advancedInfo.useCondition.acceptCategory" :rules="rewardFormRoles.advancedInfo.useCondition.acceptCategory">
            <el-input v-model="rewardForm.advancedInfo.useCondition.acceptCategory" placeholder="请输入可用商品描述文案，最多 160 个字" type="textarea" :rows="3" :maxlength="160" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">填入后将在券面拼写适用于xxx。本字段仅在页面显示，不控制核销限制</div>
          </el-form-item>
          <el-form-item label="可用商品ID" prop="advancedInfo.useCondition.acceptCategoryId" :rules="rewardFormRoles.advancedInfo.useCondition.acceptCategoryId">
            <el-input v-model="rewardForm.advancedInfo.useCondition.acceptCategoryId" placeholder="请输入可用商品描述ID，用英文逗号分隔" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">请录入优惠券可用商品ID，以英文逗号( , )分隔，最长 1000 个字。如仅限部分商品适用，且需在核销时进行程序判断，请务必填写</div>
          </el-form-item>
          <el-form-item label="不可用商品描述" prop="advancedInfo.useCondition.rejectCategory" :rules="rewardFormRoles.advancedInfo.useCondition.rejectCategory">
            <el-input v-model="rewardForm.advancedInfo.useCondition.rejectCategory" placeholder="请输入不可用商品描述文案，最多 160 个字" type="textarea" :rows="3" :maxlength="160" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">填入后将在券面拼写不适用于xxxx。本字段仅在页面显示，不控制核销限制</div>
          </el-form-item>
          <el-form-item label="可用商品ID" prop="advancedInfo.useCondition.rejectCategoryId" :rules="rewardFormRoles.advancedInfo.useCondition.rejectCategoryId">
            <el-input v-model="rewardForm.advancedInfo.useCondition.rejectCategoryId" placeholder="请输入不可用商品描述ID，用英文逗号分隔" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">请录入优惠券不可用商品ID，以英文逗号( , )分隔，最长 1000 个字。如有限部分商品不可用本优惠券，且需在核销时进行程序判断，请务必填写</div>
          </el-form-item>
        </template>
        <el-form-item label="满减门槛" prop="advancedInfo.useCondition.leastCost" :rules="rewardFormRoles.advancedInfo.useCondition.leastCost" v-if="rewardForm.cardType === 'GIFT' || rewardForm.cardType === 'CASH'">
          <el-input v-model.number="rewardForm.advancedInfo.useCondition.leastCost" placeholder="请输入" style="width: 240px;">
            <template slot="prepend">满</template>
            <template slot="append">元可用</template>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填入后将在全面拼写消费满xx元可用。本字段仅在页面显示，不控制核销限制</div>
        </el-form-item>
        <template v-if="rewardForm.cardType === 'GIFT'">
          <el-form-item label="适用商品" prop="advancedInfo.useCondition.objectUseFor" :rules="rewardFormRoles.advancedInfo.useCondition.objectUseFor">
            <el-input v-model="rewardForm.advancedInfo.useCondition.objectUseFor" placeholder="请输入可用商品描述文案，最多 160 个字" type="textarea" :rows="3" :maxlength="160" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">填入后自动拼写购买xxx可用。本字段仅在页面显示，不控制核销限制</div>
          </el-form-item>
          <el-form-item label="可用商品ID" prop="advancedInfo.useCondition.objectUseForId" :rules="rewardFormRoles.advancedInfo.useCondition.objectUseForId">
            <el-input v-model="rewardForm.advancedInfo.useCondition.objectUseForId" placeholder="请输入可用商品描述ID，用英文逗号分隔" type="textarea" :rows="3" :maxlength="1000" style="width: 400px;"></el-input>
            <div class="hui-color-text-secondary hui-font-size-small">请录入优惠券可用商品ID，以英文逗号( , )分隔，最长 1000 个字，如仅限部分商品适用，且需在核销时进行程序判断，请务必填写</div>
          </el-form-item>
        </template>
        <el-form-item label="优惠共享" prop="advancedInfo.useCondition.canUseWithOtherDiscount" :rules="rewardFormRoles.advancedInfo.useCondition.canUseWithOtherDiscount">
          <el-radio-group v-model="rewardForm.advancedInfo.useCondition.canUseWithOtherDiscount">
            <el-radio :label="false">不可与其他优惠共享</el-radio>
            <el-radio :label="true">可与其他优惠共享</el-radio>
          </el-radio-group>
        </el-form-item>
      </h-box>
      <h-box header="优惠券核销限制（保存后不可修改，请谨慎核对后保存）">
        <el-form-item label="可使用日期限制" prop="advancedInfo.timeLimit.useAllWeekly">
          <el-radio-group :disabled="type === 'edit'" v-model="rewardForm.advancedInfo.timeLimit.useAllWeekly" @change="onChangeCanUseWeekly">
            <el-radio :label="true">所有日期</el-radio>
            <el-radio :label="false">一周内的某些天</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可使用日期" prop="advancedInfo.timeLimit.canUseWeekly" v-if="!rewardForm.advancedInfo.timeLimit.useAllWeekly">
          <h-checkbox-weekly :disabled="type === 'edit'" :value.sync="rewardForm.advancedInfo.timeLimit.canUseWeekly"></h-checkbox-weekly>
          <div class="hui-color-text-secondary hui-font-size-small">示例：您可设置仅限 周一 至 周五 可用。如想每天都可用，全选即可</div>
        </el-form-item>
        <el-form-item label="可使用时段限制" prop="advancedInfo.timeLimit.useAllDaily">
          <el-radio-group :disabled="type === 'edit'" v-model="rewardForm.advancedInfo.timeLimit.useAllDaily" @change="onChangeCanUseDaily">
            <el-radio :label="true">所有时段</el-radio>
            <el-radio :label="false">一天内的某些时段</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可适用时段" prop="advancedInfo.timeLimit.canUseDaily" v-if="!rewardForm.advancedInfo.timeLimit.useAllDaily">
          <h-select-daily :disabled="type === 'edit'" :value.sync="rewardForm.advancedInfo.timeLimit.canUseDaily" style="width: 400px;"></h-select-daily>
          <div class="hui-color-text-secondary hui-font-size-small">示例：您可设置仅限一天内的部分时段可用，如可可用时段选择11点 - 12点，可用范围为 <b>大于等于 11:00</b>，<b>小于 12:00</b></div>
        </el-form-item>
      </h-box>
      <h-box header="优惠券显示信息（保存后不可修改，请谨慎核对后保存）">
        <el-form-item label="优惠券封面" prop="advancedInfo.abstract" :rules="rewardFormRoles.advancedInfo.abstract">
          <h-image v-if="rewardForm.advancedInfo.abstract.iconUrlList[0] !== ''" :src="rewardForm.advancedInfo.abstract.iconUrlList[0]" mode="background-image" width="300px" height="167px" border flex class="hui-mb-1">
            <div class="hui-coupon-abstract">{{ rewardForm.advancedInfo.abstract.abstract }}</div>
          </h-image>
          <el-button @click="handleVisibleAbstract" :disabled="type === 'edit'" type="primary" size="mini" icon="el-icon-edit" plain>设置优惠券封面</el-button>
        </el-form-item>
        <el-form-item label="优惠券图文介绍" prop="advancedInfo.textImageList" :rules="rewardFormRoles.advancedInfo.textImageList">
          <el-table :data="rewardForm.advancedInfo.textImageList" size="small" border stripe style="width: 400px; line-height: 23px;" class="hui-mb-1">
            <el-table-column label="图片" width="112px">
              <template slot-scope="scope">
                <h-image :src="scope.row.imageUrl" mode="background-image" size="90px" border></h-image>
              </template>
            </el-table-column>
            <el-table-column label="文案" prop="text"></el-table-column>
            <el-table-column label="操作" width="90px">
              <template slot-scope="scope">
                <el-button @click="handleDeleteTextImageList(scope.$index, scope.row)" :disabled="type === 'edit'" type="danger" size="mini" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="handleVisibleTextImageList" :disabled="type === 'edit'" type="primary" size="mini" icon="el-icon-plus" plain>增加一条图文内容</el-button>
        </el-form-item>
        <el-form-item label="商家服务" prop="advancedInfo.businessService" :rules="rewardFormRoles.advancedInfo.businessService">
          <el-checkbox-group v-model="rewardForm.advancedInfo.businessService">
            <el-checkbox label="BIZ_SERVICE_DELIVER">外卖服务</el-checkbox>
            <el-checkbox label="BIZ_SERVICE_FREE_PARK">停车位</el-checkbox>
            <el-checkbox label="BIZ_SERVICE_WITH_PET">可带宠物</el-checkbox>
            <el-checkbox label="BIZ_SERVICE_FREE_WIFI">免费wifi</el-checkbox>
          </el-checkbox-group>
          <div class="hui-color-text-secondary hui-font-size-small">选中即代表商家可提供这种服务，可多选</div>
        </el-form-item>
      </h-box>
      <h-box>
        <el-form-item label="" slot="footer" class="hui-mb-0">
          <el-button @click="handleSubmit('rewardForm')" :loading="loading" type="primary">{{ type === 'edit' ? '保存' : '创建' }}</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </h-box>
    </el-form>

    <hpro-dialog-branch :visible.sync="dialogVisibleBranch" :value.sync="rewardForm.baseInfo.locationIdList"></hpro-dialog-branch>

    <hpro-dialog-image :visible.sync="dialogVisibleImage" :value.sync="rewardForm.baseInfo.logoUrl"></hpro-dialog-image>

    <el-dialog title="设置优惠券封面内容" :visible.sync="dialogVisibleAbstract" width="500px">
      <el-form :model="abstractForm" ref="abstractForm" :rules="abstractFormRoles" label-width="6em">
        <el-form-item label="封面图片" prop="_iconUrlList">
          <h-image v-if="abstractForm._iconUrlList !== ''" :src="abstractForm._iconUrlList" width="300px" height="167px" border flex class="hui-my-1"></h-image>
          <el-button @click="handleVisibleAbstractImage" type="primary" size="mini" icon="el-icon-picture" plain>选择封面图片</el-button>
          <div class="hui-color-text-secondary hui-font-size-small">封面图片建议尺寸900px * 500px</div>
        </el-form-item>
        <el-form-item label="封面标题" prop="abstract">
          <el-input v-model="abstractForm.abstract" placeholder="最多 8 个字" :maxlength="8" style="width: 300px;"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="hui-text-right">
        <el-button @click="handleVisibleAbstract">取 消</el-button>
        <el-button @click="handleSubmitAbstract('abstractForm')" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <hpro-dialog-image :visible.sync="dialogVisibleAbstractImage" :value.sync="abstractForm._iconUrlList"></hpro-dialog-image>

    <el-dialog title="增加一条图文内容" :visible.sync="dialogVisibleTextImageList" width="580px">
      <el-form :model="textImageListForm" ref="textImageListForm" :rules="textImageListFormRoles" label-width="6em">
        <el-form-item label="图文图片" prop="imageUrl">
          <h-image v-if="textImageListForm.imageUrl !== ''" :src="textImageListForm.imageUrl" width="240px" flex border class="hui-mb-1"></h-image>
          <el-button @click="handleVisibleTextImageUrl" type="primary" size="mini" icon="el-icon-picture" plain>选择图片</el-button>
          <div class="hui-color-text-secondary hui-font-size-small">图文图片建议宽度为900px，高度随意，但图片不宜过大</div>
        </el-form-item>
        <el-form-item label="描述文案" prop="text">
          <el-input v-model="textImageListForm.text" :maxlength="160" :rows="3" placeholder="请输入文案，最多 160 个字" type="textarea" style="width: 400px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="hui-text-right">
        <el-button @click="handleVisibleTextImageList">取 消</el-button>
        <el-button @click="handleSubmitTextImageListForm('textImageListForm')" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <hpro-dialog-image :visible.sync="dialogVisibleTextImageUrl" :value.sync="textImageListForm.imageUrl"></hpro-dialog-image>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type: 'edit',
      loading: false,
      dialogVisibleImage: false,
      dialogVisibleBranch: false,
      dialogVisibleAbstract: false,
      dialogVisibleAbstractImage: false,
      dialogVisibleTextImageList: false,
      dialogVisibleTextImageUrl: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      rewardForm: {
        cardType: 'CASH', // 可选值GROUPON，CASH，DISCOUNT，GIFT，GENERAL_COUPON
        baseInfo: {
          logoUrl: '', // string(128),卡券的商户logo，建议像素为300*300
          codeType: 'CODE_TYPE_QRCODE', // string(16),码型
          brandName: '', // string（36）,商户名字,字数上限为12个汉字
          title: '', // string（27）,卡券名，字数上限为9个汉字。(建议涵盖卡券属性、服务及金额)
          color: 'Color010', // string（16），券颜色
          notice: '使用时请向店员出示', // string（48），卡券使用提醒，字数上限为16个汉字
          description: '', // string（3072），卡券使用说明，字数上限为1024个汉字
          sku: { // 商品信息
            quantity: undefined // 卡券库存的数量，上限为100000000
          },
          dateInfo: { // 使用日期，有效期的信息
            type: 'DATE_TYPE_FIX_TIME_RANGE', // 使用时间的类型
            _timeRange: [],
            beginTimeStamp: undefined, // 起用时间
            endTimeStamp: undefined, // 表示结束时间 ， 建议设置为截止日期的23:59:59过期。表示卡券统一过期时间，建议设置为截止日期的23:59:59过期
            fixedTerm: undefined, // type为DATE_TYPE_FIX_TERM时专用，表示自领取后多少天内有效，不支持填写0
            fixedBeginTerm: undefined, // 表示自领取后多少天开始生效，领取后当天生效填写0
            _endTimeStamp: undefined
          },
          useCustomCode: false, // 是否自定义Code码
          getCustomCodeMode: 'GET_CUSTOM_CODE_MODE_DEPOSIT', // string(32),填入 GET_CUSTOM_CODE_MODE_DEPOSIT 表示该卡券为预存code模式卡券， 须导入超过库存数目的自定义code后方可投放， 填入该字段后，quantity字段须为0,须导入code 后再增加库存
          // bindOpenid: false, // 是否指定用户领取
          servicePhone: '', // string（24）,客服电话
          locationIdList: [], // 门店位置poiid。 调用 POI门店管理接 口 获取门店位置poiid。具备线下门店 的商户为必填
          useAllLocations: true, // 设置本卡券支持全部门店，与location_id_list互斥
          centerTitle: '立即使用', // string（18）,卡券顶部居中的按钮，仅在卡券状 态正常(可以核销)时显示
          centerSubTitle: '', // string（24）,显示在入口下方的提示语 ，仅在卡券状态正常(可以核销)时显示
          centerUrl: '', // string（128）,顶部居中的url ，仅在卡券状态正常(可以核销)时显示
          centerAppBrandUserName: '', // string（128）,卡券跳转的小程序的user_name，仅可跳转该 公众号绑定的小程序
          centerAppBrandPass: '', // string（128）,卡券跳转的小程序的path
          customUrlName: '', // string（15）,自定义跳转外链的入口名字
          customUrl: '', // string（128）,自定义跳转的URL
          customUrlSubTitle: '', // string（18）,显示在入口右侧的提示语
          customAppBrandUserName: '', // string（128）,卡券跳转的小程序的user_name，仅可跳转该 公众号绑定的小程序
          customAppBrandPass: '', // string（128）,卡券跳转的小程序的path
          promotionUrlName: '', // string（15）,营销场景的自定义入口名称
          promotionUrl: '', // 入口跳转外链的地址链接
          promotionUrlSubTitle: '', // string（18）,显示在营销入口右侧的提示语
          promotionAppBrandUserName: '', // string（128）,卡券跳转的小程序的user_name，仅可跳转该公众号绑定的小程序
          promotionAppBrandPass: '', // string（128）,卡券跳转的小程序的path
          getLimit: 50, // 每人可领券的数量限制,不填写默认为50
          useLimit: 50, // 每人可核销的数量限制,不填写默认为50
          canShare: false, // 卡券领取页面是否可分享
          canGiveFriend: false // 卡券是否可转赠
        },
        advancedInfo: {
          useCondition: { // 使用门槛（条件）字段，若不填写使用条件则在券面拼写 ：无最低消费限制，全场通用，不限品类；并在使用说明显示： 可与其他优惠共享
            acceptCategory: '', // string（512）,指定可用的商品类目，仅用于代金券类型 ，填入后将在券面拼写适用于xxx
            acceptCategoryId: '', // 暂时限用商品ID
            rejectCategory: '', // string（ 512）,指定不可用的商品类目，仅用于代金券类型 ，填入后将在券面拼写不适用于xxxx
            rejectCategoryId: '', // 暂时限用商品ID
            leastCost: undefined, // 满减门槛字段，可用于兑换券和代金券 ，填入后将在全面拼写消费满xx元可用
            objectUseFor: '', // string（ 512）,购买xx可用类型门槛，仅用于兑换 ，填入后自动拼写购买xxx可用
            objectUseForId: '', // 暂时限用商品ID
            canUseWithOtherDiscount: false // 不可以与其他类型共享门槛 ，填写false时系统将在使用须知里 拼写“不可与其他优惠共享”， 填写true时系统将在使用须知里 拼写“可与其他优惠共享”， 默认为true
          },
          abstract: { // 封面摘要结构体名称
            abstract: '', // string（24）,封面摘要简介
            iconUrlList: [] // 封面图片列表，仅支持填入一 个封面图片链接， 上传图片接口 上传获取图片获得链接，填写 非CDN链接会报错，并在此填入。 建议图片尺寸像素850*350
          },
          textImageList: [], // 图文列表，显示在详情内页 ，优惠券券开发者须至少传入 一组图文列表
          businessService: [], // 商家服务类型： BIZ_SERVICE_DELIVER 外卖服务； BIZ_SERVICE_FREE_PARK 停车位； BIZ_SERVICE_WITH_PET 可带宠物； BIZ_SERVICE_FREE_WIFI 免费wifi， 可多选
          // timeLimit: [ // 使用时段限制
          //   {
          //     type: '', // 限制类型枚举值：支持填入 MONDAY 周一 TUESDAY 周二 WEDNESDAY 周三 THURSDAY 周四 FRIDAY 周五 SATURDAY 周六 SUNDAY 周日 此处只控制显示， 不控制实际使用逻辑，不填默认不显示
          //     beginHour: undefined, // 当前type类型下的起始时间（小时） ，如当前结构体内填写了MONDAY， 此处填写了10，则此处表示周一 10:00可用
          //     beginMinute: undefined, // 当前type类型下的起始时间（分钟） ，如当前结构体内填写了MONDAY， begin_hour填写10，此处填写了59， 则此处表示周一 10:59可用
          //     endHour: undefined, // 当前type类型下的结束时间（小时） ，如当前结构体内填写了MONDAY， 此处填写了20， 则此处表示周一 10:00-20:00可用
          //     endMinute: undefined // 当前type类型下的结束时间（分钟） ，如当前结构体内填写了MONDAY， begin_hour填写10，此处填写了59， 则此处表示周一 10:59-00:59可用
          //   }
          // ],
          timeLimit: {
            useAllWeekly: true,
            canUseWeekly: [],
            useAllDaily: true,
            canUseDaily: []
          }
        },
        // 以下为团购券专用
        dealDetail: '', // 团购券专用，团购详情
        // 以下为代金券专用
        leastCost: 0, // 代金券专用，表示起用金额（单位为分）,如果无起用门槛则填0
        _leastCost: 0,
        reduceCost: undefined, // 代金券专用，表示减免金额。（单位为分）
        _reduceCost: undefined,
        // 以下为折扣券专用
        discount: undefined, // 折扣券专用，表示打折额度（百分比）。填30就是七折
        _discount: undefined,
        // 以下为兑换券和通用优惠券专用
        defaultDetail: '' // 兑换券专用，填写兑换内容的名称
      },
      rewardFormRoles: {
        cardType: [{
          required: true,
          message: '优惠券类型必选',
          trigger: 'change'
        }],
        baseInfo: {
          logoUrl: [{
            required: true,
            message: '卡券logo必填',
            trigger: 'change'
          }],
          codeType: [{
            required: true,
            message: '优惠券码型必选',
            trigger: 'change'
          }],
          brandName: [{
            required: true,
            max: 12,
            message: '商户名称必填，最多 12 个字',
            trigger: 'blur, change'
          }],
          title: [{
            required: true,
            max: 9,
            message: '优惠券名称必填，最多 9 个字，建议涵盖卡券属性、服务及金额',
            trigger: 'blur, change'
          }],
          color: [{
            required: true,
            message: '卡券颜色必选',
            trigger: 'change'
          }],
          notice: [{
            required: true,
            max: 12,
            message: '卡券使用提醒必填，最多 16 个字',
            trigger: 'blur, change'
          }],
          description: [{
            required: true,
            max: 1000,
            message: '卡券使用说明，最多 1000 个字',
            trigger: 'blur'
          }],
          sku: {
            quantity: [{
              required: true,
              type: 'integer',
              min: 1,
              max: 99999999,
              message: '卡券库存的数量必填，最多 99999999 张',
              trigger: 'blur, change'
            }]
          },
          dateInfo: {
            type: [{
              required: true,
              message: '卡券时间类型必填',
              trigger: 'change'
            }],
            _timeRange: [{
              required: true,
              type: 'array',
              len: 2,
              fields: {
                0: {
                  required: true,
                  type: 'integer',
                  message: '优惠券有效期必填',
                  trigger: 'change'
                },
                1: {
                  required: true,
                  type: 'integer',
                  message: '优惠券有效期必填',
                  trigger: 'change'
                }
              }
            }],
            fixedTerm: [{
              required: true,
              type: 'integer',
              min: 1,
              message: '必填，大于等于 1 天',
              trigger: 'blur'
            }],
            fixedBeginTerm: [{
              required: true,
              type: 'integer',
              min: 0,
              message: '必填，领取后当天生效填写 0，大于等于 0 天',
              trigger: 'blur'
            }],
            _endTimeStamp: [{
              type: 'integer',
              message: '日期格式错误',
              trigger: 'blur, change'
            }]
          },
          useCustomCode: [{
            type: 'boolean',
            message: '类型必须为boolean',
            trigger: 'change'
          }],
          getCustomCodeMode: [{
            type: 'enum',
            enum: ['GET_CUSTOM_CODE_MODE_DEPOSIT'],
            message: '只能填写“GET_CUSTOM_CODE_MODE_DEPOSIT”',
            trigger: 'change'
          }],
          servicePhone: [{
            max: 13,
            message: '客服电话最多 13 个字，建议填写“区号-电话号”格式',
            trigger: 'blur, change'
          }],
          useAllLocations: [{
            required: true,
            type: 'boolean',
            message: '类型必须为boolean',
            trigger: 'change'
          }],
          locationIdList: [{
            required: true,
            type: 'array',
            min: 1,
            message: '优惠券适用门店必选，至少 1 家门店'
          }],
          centerTitle: [{
            required: true,
            max: 4,
            message: '最多 4 个字',
            trigger: 'blur, change'
          }],
          centerSubTitle: [{
            required: true,
            max: 8,
            message: '最多 8 个字',
            trigger: 'blur, change'
          }],
          centerUrl: [{
            required: true,
            max: 40,
            message: '最多 40 个字',
            trigger: 'blur, change'
          }],
          centerAppBrandUserName: [{
            required: true,
            message: '小程序应用ID必填',
            trigger: 'blur, change'
          }],
          centerAppBrandPass: [{
            required: true,
            message: '小程序应用路径必填',
            trigger: 'blur, change'
          }],
          customUrlName: [{
            required: true,
            max: 5,
            message: '最多 5 个字',
            trigger: 'blur, change'
          }],
          customUrl: [{
            required: true,
            max: 40,
            message: '最多 40 个字',
            trigger: 'blur, change'
          }],
          customUrlSubTitle: [{
            max: 4,
            message: '最多 4 个字',
            trigger: 'blur, change'
          }],
          customAppBrandUserName: [{
            required: true,
            message: '小程序应用ID必填',
            trigger: 'blur, change'
          }],
          customAppBrandPass: [{
            required: true,
            message: '小程序应用路径必填',
            trigger: 'blur, change'
          }],
          promotionUrlName: [{
            required: true,
            max: 5,
            message: '最多 5 个字',
            trigger: 'blur, change'
          }],
          promotionUrl: [{
            required: true,
            max: 40,
            message: '最多 40 个字',
            trigger: 'blur, change'
          }],
          promotionUrlSubTitle: [{
            max: 4,
            message: '最多 4 个字',
            trigger: 'blur, change'
          }],
          promotionAppBrandUserName: [{
            required: true,
            message: '小程序应用ID必填',
            trigger: 'blur, change'
          }],
          promotionAppBrandPass: [{
            required: true,
            message: '小程序应用路径必填',
            trigger: 'blur, change'
          }],
          getLimit: [{
            required: true,
            type: 'integer',
            min: 1,
            message: '每人可领券的数量必填，最少 1',
            trigger: 'blur, change'
          }],
          useLimit: [{
            required: true,
            type: 'integer',
            min: 1,
            message: '每人可核销的数量必填，最少 1',
            trigger: 'blur, change'
          }],
          canShare: [{
            required: true,
            type: 'boolean',
            message: '类型必须为boolean',
            trigger: 'change'
          }],
          canGiveFriend: [{
            required: true,
            type: 'boolean',
            message: '类型必须为boolean',
            trigger: 'change'
          }]
        },
        advancedInfo: {
          useCondition: {
            acceptCategory: [{
              max: 160,
              message: '最多 160 个字',
              trigger: 'blur, change'
            }],
            acceptCategoryId: [{
              max: 1000,
              message: '最多 1000 个字',
              trigger: 'blur, change'
            }],
            rejectCategory: [{
              max: 160,
              message: '最多 160 个字',
              trigger: 'blur, change'
            }],
            rejectCategoryId: [{
              max: 1000,
              message: '最多 1000 个字',
              trigger: 'blur, change'
            }],
            leastCost: [{
              type: 'integer',
              min: 0,
              message: '请填写整数，最小 0'
            }],
            objectUseFor: [{
              max: 160,
              message: '最多 160 个字',
              trigger: 'blur, change'
            }],
            objectUseForId: [{
              max: 1000,
              message: '最多 1000 个字',
              trigger: 'blur, change'
            }],
            canUseWithOtherDiscount: [{
              required: true,
              type: 'boolean',
              message: '类型必须为boolean',
              trigger: 'change'
            }]
          },
          abstract: [{
            type: 'object',
            fields: {
              abstract: {
                type: 'string',
                max: 8,
                message: '封面标题最多 8 个字',
                trigger: 'change'
              },
              iconUrlList: {
                type: 'array',
                message: '图片上传格式为array',
                trigger: 'change'
              }
            }
          }],
          textImageList: [{
            type: 'array',
            message: '类型必须为array',
            trigger: 'change'
          }],
          businessService: [{
            type: 'array',
            message: '类型必须为array',
            trigger: 'change'
          }],
          // timeLimit: [{
          //   type: 'array',
          //   message: '类型必须为array',
          //   trigger: 'change'
          // }]
          timeLimit: {
            useAllWeekly: [{
              required: true,
              type: 'boolean',
              message: '使用限制日期必选',
              trigger: 'change'
            }],
            canUseWeekly: [{
              required: true,
              type: 'array',
              min: 1,
              message: '可使用日期必填',
              trigger: 'change'
            }],
            useAllDaily: [{
              required: true,
              type: 'boolean',
              message: '使用时段限制必选',
              trigger: 'change'
            }],
            canUseDaily: [{
              required: true,
              type: 'array',
              min: 1,
              message: '可使用时段必选',
              trigger: 'change'
            }]
          }
        },
        dealDetail: [{
          required: true,
          max: 1000,
          message: '最多 1000 个字',
          trigger: 'blur, change'
        }],
        _leastCost: [{
          required: true,
          type: 'integer',
          min: 0,
          message: '启用金额必填，最小 0',
          trigger: 'blur'
        }],
        _reduceCost: [{
          required: true,
          type: 'integer',
          min: 1,
          message: '减免金额必填，最小 1',
          trigger: 'blur'
        }],
        _discount: [{
          required: true,
          type: 'integer',
          min: 10,
          max: 99,
          message: '折扣力度必填，10 - 99 之间',
          trigger: 'blur'
        }],
        defaultDetail: [{
          required: true,
          max: 1000,
          message: '通用券优惠详情必填，最多 1000 个字',
          trigger: 'blur'
        }]
      },
      abstractForm: {
        abstract: '',
        iconUrlList: [],
        _iconUrlList: ''
      },
      abstractFormRoles: {
        abstract: [{
          required: true,
          max: 8,
          message: '必填，最多 8 个字',
          trigger: 'blur'
        }],
        _iconUrlList: [{
          required: true,
          type: 'url',
          message: '封面图片必选',
          trigger: 'change'
        }]
      },
      textImageListForm: {
        imageUrl: '',
        text: ''
      },
      textImageListFormRoles: {
        imageUrl: [{
          required: true,
          type: 'url',
          message: '图文图片必选，格式为url',
          trigger: 'change'
        }],
        text: [{
          required: true,
          max: 160,
          message: '图文描述文案必填，最多 160 个字',
          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    // 根据url判断类型
    setType () {
      let type = this.$route.query.type
      this.type = type
      if (type === 'edit') {
        this.initMockData()
      }
    },

    // 模拟数据
    initMockData () {
      console.log('模拟数据')
    },

    // 统一过期时间change事件
    onChangeEndTimeStamp (val) {
      let endTimeStamp = this.$moment(val).set({'hour': 23, 'minute': 59, 'second': 59}).format('X')
      this.rewardForm.baseInfo.dateInfo.endTimeStamp = endTimeStamp
    },

    // 设置参加活动门店为空
    onChangeUseAllLocations () {
      if (this.rewardForm.baseInfo.useAllLocations) {
        this.rewardForm.baseInfo.locationIdList = []
      }
    },

    // 打开选择门店模态框
    handleDialogBranch () {
      let visible = this.dialogVisibleBranch
      this.dialogVisibleBranch = !visible
    },

    // 设置可用星期为空
    onChangeCanUseWeekly () {
      if (this.rewardForm.advancedInfo.timeLimit.useAllWeekly) {
        this.rewardForm.advancedInfo.timeLimit.canUseWeekly = []
      }
    },

    // 设置可使用时段为空
    onChangeCanUseDaily () {
      if (this.rewardForm.advancedInfo.timeLimit.useAllDaily) {
        this.rewardForm.advancedInfo.timeLimit.canUseDaily = []
      }
    },

    // 打开选择图片模态框
    handleDialogImage () {
      let visible = this.dialogVisibleImage
      this.dialogVisibleImage = !visible
    },

    // 增加图文封面图片和标题的模态框
    handleVisibleAbstract () {
      let visible = this.dialogVisibleAbstract
      this.dialogVisibleAbstract = !visible
    },

    // 打开选图文封面的模态框
    handleVisibleAbstractImage () {
      let visible = this.dialogVisibleAbstractImage
      this.dialogVisibleAbstractImage = !visible
    },

    // 提交图文封面和标题表单
    handleSubmitAbstract (formName) {
      this.$formSubmit(formName).then(() => {
        let abstract = this.abstractForm.abstract
        let _iconUrlList = this.abstractForm._iconUrlList
        let tmp = []
        tmp.push(_iconUrlList)
        let iconUrlList = tmp
        this.rewardForm.advancedInfo.abstract = {
          abstract: abstract,
          iconUrlList: iconUrlList
        }
        this.handleVisibleAbstract()
      }).catch(() => {
        return false
      })
    },

    // 删除已经添加的图文内容
    handleDeleteTextImageList (index, row) {
      let textImageList = this.rewardForm.advancedInfo.textImageList
      textImageList.splice(index, 1)
    },

    // 打开新增图文内容的模态框
    handleVisibleTextImageList () {
      let visible = this.dialogVisibleTextImageList
      this.dialogVisibleTextImageList = !visible
    },

    // 打开选择图文内容里面的选择图片模态框
    handleVisibleTextImageUrl () {
      let visible = this.dialogVisibleTextImageUrl
      this.dialogVisibleTextImageUrl = !visible
    },

    handleSubmitTextImageListForm (formName) {
      this.$formSubmit(formName).then(() => {
        let textImageList = this.rewardForm.advancedInfo.textImageList
        let element = this.textImageListForm
        textImageList.push(element)
        this.$message.success('图文消息创建成功')
        this.handleVisibleTextImageList()
        this.textImageListForm = {
          imageUrl: '',
          text: ''
        }
      }).catch(() => {
        return false
      })
    },

    // 返回
    handleBack () {
      this.$router.back()
    },

    // 表单校验
    handleSubmit (formName) {
      this.$formSubmit(formName).then(() => {
        console.log('提交！')
        this.$loading()
        this.loading = true
        setTimeout(() => {
          this.$message({
            message: '优惠券保存成功！',
            type: 'success'
          })
          this.handleBack()
          this.$loading().close()
        }, 1000)
      }).catch(() => {
        console.log('表单校验失败！')
        this.$message({
          message: '必要的优惠券信息没填写完整, 请检查!',
          type: 'warning'
        })
        this.loading = false
      })
    }
  },
  created () {
    this.setType()
  }
}
</script>

<style lang="less">
@import "../../../../../common/h-theme/_variable.less";

.hui-coupon-abstract {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .54);
  color: @--color-white;
  font-size: @--font-size-base;
  padding: 0 1rem;
}
</style>
